<template>
	<div class="content">
		<div class="category">
			<div
				v-for="item of categories"
				:key="item.name"
				:class="{'category__item': true,
				'category__item--active': currentTab === item.tab}"
				@click="handleTabClick(item.tab)"
			>
				{{item.name}}
			</div>
		</div>
		<div class="product">
			<div class="product__item" v-for="item of contentList" :key="item._id">
				<img class="product__item__img" :src="item.imgUrl" alt="imgs" />
				<div class="product__item__detail">
					<h4 class="product__item__title">{{item.name}}</h4>
					<p class="product__item__sales">月售{{item.sales}}份</p>
					<p class="product__item__price">
						<span class="product__item__yen">&yen;{{item.price}}</span>
						<span class="product__item__origin">&yen;{{item.oldPrice}}</span>
					</p>
				</div>
				<div class="product__number">
					<span
						class="product__number__minus iconfont"
						@click="changeCartItem(shopId, item._id, item, -1, shopName)"
					>&#xe691;</span>
					<template v-if="cartList[shopId] && cartList[shopId]?.productList">
						{{cartList[shopId]?.productList[item._id]?.count || 0}}
					</template>
					<template v-else>0</template>
					<span
						class="product__number__plus iconfont"
						@click="changeCartItem(shopId, item._id, item, 1, shopName)"
					>&#xe668;</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { defineComponent, ref, reactive, toRefs, watchEffect } from 'vue'
	import { useRoute } from 'vue-router'
	import { useStore } from 'vuex'
	import { get } from '../../utils/request'
	import { useCommonCartEffect } from './commonCartEffect'

	const ERR_OK = 0

	const categories = [
		{ name: '全部商品', tab: 'all' },
		{ name: '秒杀', tab: 'seckill' },
		{ name: '新鲜水果', tab: 'fruit' }
	]

	const useTabEffect = () => {
		const currentTab = ref('all')
		const handleTabClick = (tab) => {
			currentTab.value = tab
		}
		return {
			currentTab,
			handleTabClick
		}
	}

	const useListEffect = (currentTab, shopId) => {
		const data = reactive({
			contentList: []
		})
		const getContentList = async() => {
			const result = await get(`/api/shop/${shopId}/products`, { tab: currentTab.value })
			if (result.errno === ERR_OK && result.data.length) {
				data.contentList = result.data
			}
		}
		const { contentList } = toRefs(data)
		watchEffect(() => {
			getContentList()
		})
		return {
			shopId,
			contentList
		}
	}
	// 购物车数据结构组合
	const useCartEffect = () => {
		const store = useStore()
		const { changeToCart, cartList } = useCommonCartEffect()
		const changeShopName = (shopId, shopName) => {
			store.commit('changeShopName', { shopId, shopName })
		}
		const changeCartItem = (shopId, productId, product, num, shopName) => {
			changeToCart(shopId, productId, product, num)
			changeShopName(shopId, shopName)
		}
		return {
			cartList,
			changeCartItem
		}
	}

	export default defineComponent({
		name: 'Content',
		props: ['shopName'],
		setup() {
			const route = useRoute()
			const shopId = route.params.id
			const { currentTab, handleTabClick } = useTabEffect()
			const { contentList } = useListEffect(currentTab, shopId)
			const { cartList, changeCartItem } = useCartEffect()
			return {
				shopId,
				cartList,
				categories,
				currentTab,
				contentList,
				changeCartItem,
				handleTabClick
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../style/variable.scss';
	@import '../../style/mixins.scss';

	.content {
		display: flex;
		position: absolute;
		left: 0;
		top: 1.5rem;
		right: 0;
		bottom: .5rem;
		.category {
			width: .76rem;
			height: 100%;
			background: $search-bgColor;
			overflow-y: scroll;
			&__item {
				line-height: .4rem;
				text-align: center;
				font-size: .14rem;
				color: $content-font-color;
				&--active {
					background: #fff;
				}
			}
		}
		.product {
			flex: 1;
			overflow-y: scroll;
			&__item {
				position: relative;
				display: flex;
				padding: .12rem 0;
				margin: 0 .16rem;
				border-bottom: .01rem solid #f1f1f1;
				&__detail {
					overflow: hidden;
				}
				&__img {
					width: .68rem;
					height: .68rem;
					margin-right: .16rem;
				}
				&__title {
					margin: 0;
					line-height: .2rem;
					font-size: .14rem;
					color: $content-font-color;
					@include ellipsis;
				}
				&__sales {
					margin: .06rem 0;
					line-height: .16rem;
					font-size: .12rem;
					color: $content-font-color;
				}
				&__price {
					margin: 0;
					line-height: .2rem;
					font-size: .14rem;
					color: $highlight-fontColor;
				}
				&__yen {
					font-size: .16rem;
					margin-right: .1rem;
				}
				&__origin {
					font-size: .12rem;
					line-height: .2rem;
					color: #999;
					text-decoration: line-through;
				}
				.product__number {
					position: absolute;
					right: 0;
					bottom: .12rem;
					line-height: .18rem;
					&__minus {
						position: relative;
						top: .02rem;
						color: #666;
						margin-right: .05rem;
					}
					&__plus {
						position: relative;
						top: .02rem;
						color: $btn-bgColor;
						margin-left: .05rem;
					}
				}
			}
		}
	}
</style>
